.myImage {
    background-color: #F2F2F2;
    position: relative;
    font-size: 24rpx;
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 188rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
    overflow-x: hidden;

    .imageGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;
        padding: 20rpx 0;
    }

    .imageItem {
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

        .imageWrapper {
            width: 100%;
            padding-bottom: 100%; // 1:1 aspect ratio
            position: relative;
            overflow: hidden;
            border-radius: 8rpx;

            .image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .imageName {
            margin-top: 12rpx;
            font-size: 24rpx;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .imageDate {
            font-size: 20rpx;
            color: #999;
            margin-top: 4rpx;
        }
    }

    .emptyState {
        text-align: center;
        padding: 120rpx 0;
        color: #999;

        .emptyIcon {
            font-size: 96rpx;
            margin-bottom: 20rpx;
        }

        .emptyText {
            font-size: 28rpx;
        }
    }
}